Reusable Widgets তৈরি করা

Flutter এ Reusable Widgets তৈরি করা হলো একটি গুরুত্বপূর্ণ প্র্যাকটিস, যা কোডকে পরিষ্কার, কার্যকরী এবং পুনরায় ব্যবহারযোগ্য করে তোলে। Reusable Widgets তৈরি করলে আপনি একই ধরনের UI এলিমেন্ট একাধিক জায়গায় ব্যবহার করতে পারেন, ফলে কোড রিডান্ডেন্সি কমে এবং কোড মেইনটেইন করা সহজ হয়। এটি বিশেষভাবে বড় এবং জটিল অ্যাপ্লিকেশন ডেভেলপ করার সময় গুরুত্বপূর্ণ।

Reusable Widgets তৈরি করার উপকারিতা:

1. কোড রিডান্ডেন্সি কমানো: একই কোড একাধিকবার লেখার প্রয়োজন হয় না।
2. কোড মেইনটেনেন্স সহজ করা: যদি কোনো চেঞ্জ করতে হয়, তাহলে শুধু উইজেট আপডেট করলেই সেই পরিবর্তন সব জায়গায় প্রয়োগ হয়।
3. UI কনসিস্টেন্সি বজায় রাখা: Reusable Widgets ব্যবহার করে UI এলিমেন্টগুলোর ডিজাইন এবং ফাংশন একরকম রাখা যায়।
4. কোড রিডেবিলিটি বাড়ানো: ছোট ছোট উইজেট তৈরি করে কোড আরো পড়তে এবং বুঝতে সহজ হয়।

Reusable Widget তৈরির ধাপসমূহ:

১. Stateless Widget ব্যবহার করে Reusable Widget তৈরি:

Stateless Widget ব্যবহার করে আপনি সাধারণত স্ট্যাটিক UI এলিমেন্ট যেমন বাটন, কার্ড, বা টেক্সট ব্লক তৈরি করতে পারেন, যেগুলোতে কোনো স্টেট পরিবর্তন হয় না।

উদাহরণ (Custom Button Widget):

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  final Color color;

  const CustomButton({
    required this.text,
    required this.onPressed,
    this.color = Colors.blue,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(primary: color),
      child: Text(text, style: TextStyle(color: Colors.white)),
    );
  }
}

• CustomButton: এটি একটি Reusable Button Widget, যা text, onPressed এবং color প্যারামিটার হিসেবে গ্রহণ করে।
• text: বাটনের টেক্সট।
• onPressed: বাটনের ক্লিক ইভেন্ট হ্যান্ডেল করার জন্য একটি কোলব্যাক ফাংশন।
• color: বাটনের রঙ কাস্টমাইজ করার জন্য।

ব্যবহার (Custom Button Widget):

CustomButton(
  text: 'Click Me',
  onPressed: () {
    print('Button Pressed!');
  },
  color: Colors.green,
)

২. Stateful Widget ব্যবহার করে Reusable Widget তৈরি:

Stateful Widget ব্যবহার করে আপনি এমন উইজেট তৈরি করতে পারেন যেগুলোতে স্টেট পরিবর্তন হয়। এটি সাধারণত ইনপুট ফিল্ড, টগল বাটন, বা ডাইনামিক UI এলিমেন্ট তৈরি করতে ব্যবহৃত হয়।

উদাহরণ (Custom Toggle Switch Widget):

import 'package:flutter/material.dart';

class CustomToggleSwitch extends StatefulWidget {
  final bool initialValue;
  final ValueChanged<bool> onChanged;

  const CustomToggleSwitch({
    required this.initialValue,
    required this.onChanged,
  });

  @override
  _CustomToggleSwitchState createState() => _CustomToggleSwitchState();
}

class _CustomToggleSwitchState extends State<CustomToggleSwitch> {
  late bool _isOn;

  @override
  void initState() {
    super.initState();
    _isOn = widget.initialValue;
  }

  void _toggleSwitch() {
    setState(() {
      _isOn = !_isOn;
      widget.onChanged(_isOn);
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _toggleSwitch,
      child: Container(
        width: 60,
        height: 30,
        decoration: BoxDecoration(
          color: _isOn ? Colors.green : Colors.grey,
          borderRadius: BorderRadius.circular(15),
        ),
        child: AnimatedAlign(
          duration: Duration(milliseconds: 200),
          alignment: _isOn ? Alignment.centerRight : Alignment.centerLeft,
          child: Container(
            width: 25,
            height: 25,
            decoration: BoxDecoration(
              color: Colors.white,
              shape: BoxShape.circle,
            ),
          ),
        ),
      ),
    );
  }
}

• CustomToggleSwitch: এটি একটি Reusable Toggle Switch Widget, যা initialValue এবং onChanged প্যারামিটার নেয়।
• _toggleSwitch(): এটি একটি ফাংশন যা টগল সুইচের স্টেট পরিবর্তন করে এবং প্যারেন্ট উইজেটকে নোটিফাই করে।
• AnimatedAlign: এটি সুইচের মুভমেন্ট অ্যানিমেট করে।

ব্যবহার (Custom Toggle Switch Widget):

CustomToggleSwitch(
  initialValue: true,
  onChanged: (value) {
    print('Switch is now: $value');
  },
)

৩. Theme এবং Styling Reusable Widget:

Flutter এ Reusable Widget তৈরি করার সময় স্টাইলিং এবং থিম কনফিগার করার জন্য প্যারামিটার ব্যবহার করতে পারেন। এটি আপনাকে একই উইজেট ভিন্ন ভিন্ন স্টাইল বা থিম ব্যবহার করে ডাইনামিক্যালি কাস্টমাইজ করতে সাহায্য করবে।

উদাহরণ (Custom Card Widget):

import 'package:flutter/material.dart';

class CustomCard extends StatelessWidget {
  final Widget child;
  final Color backgroundColor;
  final double elevation;

  const CustomCard({
    required this.child,
    this.backgroundColor = Colors.white,
    this.elevation = 4.0,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      color: backgroundColor,
      elevation: elevation,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12.0),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: child,
      ),
    );
  }
}

• CustomCard: এটি একটি Reusable Card Widget, যা child, backgroundColor, এবং elevation প্যারামিটার নেয়।
• child: কার্ডের মধ্যে যেকোনো কন্টেন্ট প্রদর্শন করতে পারে।
• backgroundColor এবং elevation: থিম এবং স্টাইলিং কাস্টমাইজ করার জন্য।

ব্যবহার (Custom Card Widget):

CustomCard(
  backgroundColor: Colors.lightBlueAccent,
  elevation: 8.0,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('Title', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
      SizedBox(height: 8),
      Text('This is a description inside a reusable card.'),
    ],
  ),
)

Reusable Widget তৈরির সেরা চর্চা:

1. কোডকে পরিষ্কার রাখুন: উইজেট যত ছোট এবং সরল থাকবে, তত সহজে পুনঃব্যবহারযোগ্য হবে।
2. প্যারামিটার ব্যবহার করুন: উইজেট কাস্টমাইজ করার জন্য প্যারামিটার এবং ডিফল্ট ভ্যালু ব্যবহার করুন, যা ডেভেলপমেন্টে সুবিধা দেবে।
3. ফাংশন প্যারামিটার যোগ করুন: বাটন বা ইনপুট উইজেটের ক্ষেত্রে VoidCallback বা ValueChanged প্যারামিটার ব্যবহার করে ইভেন্ট হ্যান্ডলিং সহজ করুন।
4. থিম এবং কাস্টম স্টাইলিং যোগ করুন: উইজেটে থিম এবং স্টাইল প্যারামিটার যোগ করে তা ডাইনামিক্যালি কাস্টমাইজযোগ্য রাখুন।

উপসংহার:

Flutter এ Reusable Widgets তৈরি করে আপনি কোডকে ক্লিন, মেইনটেইনেবল এবং স্কেলেবল করতে পারেন। Reusable Widgets আপনাকে অ্যাপ্লিকেশন ডেভেলপমেন্টে স্পিড বাড়াতে এবং UI কনসিস্টেন্সি বজায় রাখতে সহায়তা করে।